<template>
  <div class="page-container">
    <top-navigation @toggleFullscreen="toggleFullscreen" />
    <div class="main-content">
      <div class="content-wrapper">
        <h2>预测功能开发中...</h2>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TopNavigation from '@/components/TopNavigation.vue'

const isFullscreen = ref(false)

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    document.exitFullscreen()
    isFullscreen.value = false
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100vh;
  background: #1a1f3d;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.content-wrapper {
  background: rgba(13, 19, 35, 0.6);
  border-radius: 8px;
  padding: 20px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  h2 {
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
  }
}
</style>